<?php if($this->isAjax !== true) {?>
<div class="box altbox">
    <div class="boxin">
        <div class="header">
            <h1>New Ticket</h1>
        </div>
        <div class="page">
            <?php echo $this->form; ?>
        </div>
    </div>
</div>
<?php } else { ?>
    <?php echo $this->form; ?>
<?php } ?>

<div id='newContactModal'><div id="newContactContent"></div></div>

<script>
    function split(val) 
    {
    	return val.split( /,\s*/ );
    }
    
    function extractLast(term) 
    {
    	return split(term).pop();
    }

    $(document).ready(function() {
        $('#newContactModal').hide();
        
        $('#newContactModal').dialog({
            'autoOpen'      : false,
            'draggable'     : true,
            'modal'         : true,
            'resizable'     : false,
            'title'         : 'New Contact',
            'closeOnEscape' : false,
            'position'      : 'middle',
            'width'			: 350,
            'position'		: 'top',
            'buttons'       : {
                'Create'    :
                    function() {
                    	var destObj = $('div#newTicketContent #destination');
						
                    	$.ajax({  
                            type: "POST",  
                            dataType: "json",
                            url: "/backoffice/async/new-contact",  
                            data: $("#newContactForm").serialize(),  
                            success: function(res) {
                                
                            	if(res.success)
                            	{
                            	    destObj.val(destObj.val() + res.name + ' <'+ res.email +'>, ');
                            	    $('#newContactModal').dialog('close');
                            	    $('#newContactContent').html('');
                            	}
                            }  
                        });
                    },
                'Cancel':
                    function() {
                        $(this).dialog('close');
                        $("#newContactContent").html('');
                    }
            }
        });
        
        $('#destination')
            .bind('keydown', function(event) {
                if(event.keyCode === $.ui.keyCode.TAB && $(this).data('autocomplete').menu.active) 
                {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: function(request, response) {
                    $.getJSON('/backoffice/async/contact-search', {
                        term: extractLast(request.term)
                    }, response );
				},
                'focus': function() {
                    // prevent value inserted on focus
                    return false;
                },
                'search': function() {
                    // custom minLength
                    var term = extractLast(this.value);

                    if (term.length < 2) 
                    {
                        return false;
                    }
                },
                'select': function(event, ui) {
                    var terms = split(this.value);

                    // remove the current input
                    terms.pop();

                    if(ui.item.isNewContact != true)
                    {
                        // add the selected item
                        terms.push(ui.item.name + " <" + ui.item.email + ">");
                    }
                    else
                    {
                        $('#newContactContent').load('/backoffice/async/new-contact');
                        $('#newContactModal').dialog('open');
                    }
                    
                    // add placeholder to get the comma-and-space at the end
                    terms.push("");
                    this.value = terms.join(", ");
                    
                    return false;
                }
            })
            .data('autocomplete')._renderItem = function(ul, item){
                return $('<li></li>').data('item.autocomplete', item)
                                     //.append('<a style="color: #444 !important;"><strong>'+item.name+'</strong><br />'+(item.isNewContact == true ? '&nbsp;' : item.email)+'</a>')
                                     .append('<a style="color: #444 !important;"><table><tr><td rowspan="2"><img src="/images/fff/'+(item.isNewContact == true ? 'email_add' : 'email')+'.png" title="User" style="padding-right: 5px" /></td><td><strong>'+item.name+'</strong></td></tr><tr><td>'+(item.isNewContact == true ? '&nbsp;' : item.email)+'</td></tr></table></a>')
                                     .appendTo(ul);
            };

        $('.editor').tinymce({
            //'apply_source_formatting': 1,
            'script_url' : '/js/tiny_mce/tiny_mce.js',
            'theme'      : 'simple',
            'plugins'    : 'pagebreak,',
            'width'      : '730',
            'height'     : '220'
        });
    });
</script>